<style>
.loginCardContainer{
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.loginCard{
  width: 30%;
}
</style>

<template>
<div class="loginCardContainer">
  
  <div class="loginCard">
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol"  style="margin-top:45%;margin-left:3%">
      <a-form-item
        label="账号"
        has-feedback
        :validateStatus="type1"
        :help="message1"
      >
        <a-input
          v-model:value="user.user_id"
          placeholder="请输入账号"
          @change="checkId"
        />
      </a-form-item>

      <a-form-item
        label="密码"
        has-feedback
        :validate-status="type2"
        :help="message2"
      >
        <a-tooltip placement="topLeft">
          <template #title>请输入密码</template>
          <a-input-password
            v-model:value="user.user_pwd"
            @change="checkPwd"
            placeholder="请输入密码"
          />
        </a-tooltip>
      </a-form-item>
      <div style="display:flex;justify-content:space-between;width:70%;margin-left:17%;margin-top:-3%;">
        <a href="/security/register">还没有账户？需要注册</a>
      <a @click="openForget">忘记密码</a>
      </div>
      
    </a-form>
    <a-modal v-model:visible="visible1" title="忘记密码" @ok="gotoForgetPWd">
      <a-form-item
        label="账户id"
        has-feedback
        :validateStatus="type3"
        :help="message3"
      >
        <a-input
          v-model:value="forgetUser.user_id"
          placeholder="请输入账户id"
          @change="checkId2"
        />
      </a-form-item>
    </a-modal>

    <a-button type="primary" @click="login" style="margin-left: 19%;margin-top:5%">
      登录
    </a-button>
  </div>
  <div style="width:70%">
    <img src="/bc.jpg" alt="" style="width:100%">
  </div>
</div>

</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////
const user = reactive({
  user_id: "",
  user_pwd: "",
});

const forgetUser = reactive({
  user_id: "",
  user_pwd: "",
});

const router = useRouter();

const message1 = ref("");

const type1 = ref("");

const message3 = ref("");

const type3 = ref("");

const type2 = ref("error");

const message2 = ref("密码不得少于6位");

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 17,
};

const visible1 = ref(false);

////////////////////////////////////////////
const openForget = () => {
  visible1.value = true;
};

const gotoForgetPWd = () => {
  post("/security/login/checkUser", forgetUser).then((res) => {
    if (res.success) {
      localStorage.setItem("forget.user_id", forgetUser.user_id);
      visible1.value = false;
      router.push({ path: "/security/forgetPwd" });
    } else {
      message.error("用户不存在");
    }
  });
};

const login = () => {
  if (type1.value == "success") {
    if (type2.value == "success") {
      post("/security/login", user).then((res) => {
        if (res.data) {
          const token = res.data;
          setLocalToken(token);

          const web = res.message;

          router.push({ path: web });
        } else {
          message.error(res.message);
        }
      });
    } else {
      message.error(message2.value);
    }
  } else {
    message.error(message1.value);
  }
};

const checkId = () => {
  if (user.user_id.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "请输入账号";
  }
};

const checkId2 = () => {
  if (forgetUser.user_id.length > 0) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "请输入账号";
  }
};

const checkPwd = () => {
  if (user.user_pwd.length >= 6) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "密码不得少于6位";
  }
};
</script>

